<template>
	<view class="main ">
		<view class="n">
			<view class="one three">
				<view class="t-title">&nbsp;</view>
				<view class="t-main">
					<view class="t-m-l-r">
						<view>
							<view class="lr-item-box" v-for="(item, k) in props.data.sub" :key="k">
								<view class="lr-item" :style="{ fontWeight: '400', fontSize: '15rpx' }"
									v-if="item.generation">{{
                                            item.generation }}
								</view>
								<view class="lr-item" :style="{ fontWeight: '400', fontSize: '15rpx' }" v-if="item.sex">
									{{
                                            item.sex }}
								</view>
								<view class="lr-item" :style="{ fontWeight: '400', fontSize: '15rpx' }"
									v-if="item.rank">
									{{
                                            item.rank }}
								</view>
								<view class="lr-item" :style="{ fontWeight: '400', fontSize: '15rpx' }"
									v-if="item.introduction">{{
                                            item.introduction }}
								</view>
								<view class="lr-item" :style="{ fontWeight: '400', fontSize: '15rpx' }" v-if="item.zhi">
									{{
                                            item.zhi }}
								</view>
								<view class="lr-item" :style="{ fontWeight: '400', fontSize: '15rpx' }" v-if="item.hao">
									{{
                                            item.hao }}
								</view>
								<view class="lr-item" :style="{ fontWeight: '400', fontSize: '15rpx' }"
									v-if="item.zhiName">{{
                                            item.zhiName }}
								</view>
								<view class="lr-item" :style="{ fontWeight: '400', fontSize: '15rpx' }"
									v-if="item.formerName">{{
                                            item.formerName }}
								</view>
								<view class="lr-item" :style="{ fontWeight: '400', fontSize: '15rpx' }"
									v-if="item.ethnicity">{{
                                            item.ethnicity }}
								</view>
								<view class="lr-item" :style="{ fontWeight: '400', fontSize: '15rpx' }"
									v-if="item.phone">
									{{
                                            item.phone }}
								</view>
								<view class="lr-item" :style="{ fontWeight: '400', fontSize: '15rpx' }"
									v-if="item.education">{{
                                            item.education }}
								</view>
								<view class="lr-item" :style="{ fontWeight: '400', fontSize: '15rpx' }"
									v-if="item.occupation">{{
                                            item.occupation }}
								</view>

								<view class="lr-item" :style="{ fontWeight: '400', fontSize: '15rpx' }"
									v-if="item.marriage">{{
                                            item.marriage }}
								</view>
								<view class="lr-item" :style="{ fontWeight: '400', fontSize: '15rpx' }"
									v-if="item.homeAddress">{{
                                            item.homeAddress }}
								</view>
								<view class="lr-item" :style="{ fontWeight: '400', fontSize: '15rpx' }"
									v-if="item.nativePlace">{{
                                            item.nativePlace }}
								</view>

								<view class="lr-item" :style="{ fontWeight: '400', fontSize: '15rpx' }"
									v-if="item.birthAddress">{{
                                            item.birthAddress }}
								</view>

								<view class="lr-item" :style="{ fontWeight: '400', fontSize: '15rpx' }"
									v-if="item.otherInfo">{{
                                            item.otherInfo }}
								</view>


								<view class="lr-item" v-for="(data, k) in item.children" :key="k"
									:style="{ fontWeight: '400', fontSize: '15rpx' }">{{
                                            data.nameAll }}
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="two">
				<view class="top">{{ props.data.bookName }}</view>
				<view class="bottom">
					<view class="s">
						<view class="s-b y">
							<img src="/static/icons/l.png">
						</view>
						<view class="s-b e">
							<img src="/static/icons/r.png">
						</view>
					</view>
					<view class="t-one">卷{{ props.data.volumesNum }}</view>
					<view class="t-two">{{ props.data.xiName }}</view>
					<view class="t-two t-three">{{ props.data.pageNum }}</view>
					<view class="t-four">{{ props.data.tangHao }}</view>
				</view>
			</view>
			<view class="three">
				<view class="t-title">{{ props.data.fname || '暂无' }}</view>
				<view class="t-main">
					<view class="t-m-l-r">
						<view>
							<view class="lr-item-box" v-for="(item, k) in props.data.sub" :key="k">
								<view class="lr-item" :key="k">{{ item.birthday || '未知' }}</view>

								<view v-if="item.spouse" class="lr-item"
									:style="{ fontWeight: '900', fontSize: '17rpx' }" :key="k">{{
                                            item.spouse.nameAll || '未知' }}</view>
								<view v-if="item.spouse" class="lr-item" :key="k">{{
                                        item.spouse.birthday || '未知' }}</view>

							</view>
						</view>
						<view>
							<view class="lr-line">
								<view class="lr-line-c">
								</view>
							</view>
							<view class="bl-item-box">
								<view class="bl-item" v-for="(item, index) in props.data.sub" :key="index">
									<template v-for="(i, k) in item.children" :key="k">
										<view class="bl-item" v-if="item.children.length">
											<view class="xian"></view>
											<view class="yuan"></view>
											<view class="bl-text">{{ i.nameAll || '暂无' }}</view>
											<view class="son" v-for="(n, m) in i.children" :key="m">{{ n.nameAll ||
                                                    '暂无'
                                                    }}
											</view>
										</view>
									</template>

								</view>
							</view>
						</view>
					</view>

					<view class="t-main-left">
						<view class="t-m-l-l">
							<view class="ll-item" v-for="(item, index) in props.data.sub" :key="item">
								<view class="line" v-if="index != 0"></view>
								<view class="y"></view>
								<view class="ll-txt">{{ item.lastName }}公</view>
							</view>
						</view>
					</view>
					<view class="t-main-right">
						<view class="t-item" v-for="(item, index) in props.data.sub" :key="index">
							<view class="t-txt">{{ item.generation }}世</view>
						</view>
					</view>
				</view>
			</view>
			<!-- <view class="four">
                <view class="title">手海公支派可计工资下是戏图</view>
            </view> -->
		</view>
	</view>
</template>

<script setup>
	const props = defineProps({
		data: Object
	})
</script>
<style lang="scss" scoped>
	.main {
		border: 5rpx solid #000;
		padding: 3rpx;
		height: 100%;
		background-color: #fff;

		.n {
			min-height: 1200rpx;
			height: 100%;
			border: 2rpx solid #000;
			display: flex;
			justify-content: space-between;

			.one {
				flex: 4;
			}

			.two {
				flex: 0.5;
				border-left: 2rpx solid #000;
				border-right: 2rpx solid #000;
				display: flex;
				flex-direction: column;
				align-items: center;

				.top {
					border-bottom: 2rpx solid #000;
					writing-mode: vertical-lr;
					width: 100%;
					display: flex;
					justify-content: center;
					align-items: center;
					padding: 10rpx 0;
					flex: 1;
					font-size: 25px;
					font-weight: 900;
				}

				.s {
					width: 100%;

					.y,
					.e {
						top: 0;
						position: absolute;
					}

					.y {
						left: 0;
					}

					.e {
						right: 0;
					}

					.s-b {
						width: 22rpx;
						height: 22rpx;
						display: flex;
						align-items: center;

						img {
							width: 22rpx;
							height: 22rpx;
						}
					}

				}

				.bottom {
					position: relative;
					flex: 4;
					writing-mode: vertical-lr;
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding: 20rpx 0;
					width: 100%;

					.t-one {
						font-weight: 900;
						font-size: 20px;
					}

					.t-two {
						font-size: 15px;
					}
				}
			}

			.three {
				flex: 4;

				.t-title {
					border-bottom: 2rpx solid #000;
					text-align: right;
					font-size: 15px;
					padding: 15rpx 30rpx 10rpx 0;
				}

				.t-main {
					display: flex;

					.t-m-l-r {
						flex: 4;
						display: flex;
						flex-direction: column;
						// justify-content: space-between;
						padding: 20rpx 0;


						.lr-item-box:last-child {
							margin-bottom: 0 !important;
						}

						.lr-item-box:last-child {
							border: none !important;
						}

						.bl-item-box {
							display: flex;

							//align-items: center;
							.lr-item {
								font-size: 30px
							}

							.bl-item:first-child {
								// margin-right: 0;
							}

							.bl-item {
								margin: 0 30rpx;
								display: flex;
								//justify-content: center;
								align-items: center;
								flex-direction: column;
								position: relative;

								.son {
									position: absolute;
									left: -20rpx;
									bottom: -10rpx;
									font-size: 15px;
									writing-mode: vertical-lr;
								}

								.yuan {
									width: 10rpx;
									height: 10rpx;
									border-radius: 50%;
									border: 1rpx solid #000;
								}

								.xian {
									width: 1rpx;
									height: 15rpx;
									background-color: #000;
								}

								.bl-text {
									font-size: 20px;
									font-weight: 900;
									writing-mode: vertical-lr;
								}
							}
						}

						.lr-line {
							display: flex;
							justify-content: flex-end;
							background-color: #000;

							.lr-line-c {
								width: 75%;
								background-color: #000;
								height: 1rpx;
								display: flex;
								justify-content: space-between;
								align-items: center;


							}

						}

						.lr-item-box {
							min-height: 120rpx;
							max-height: 120rpx;
							border-bottom: 2rpx solid #000;
							padding-bottom: 10rpx;
							display: flex;
							align-items: center;
							justify-content: flex-end;
							margin-bottom: 10rpx;


							.lr-item {
								writing-mode: vertical-lr;
								font-size: 18px !important;
								margin: 0 5rpx;
							}
						}
					}

					.t-main-left {
						flex: 1;
						display: flex;
						// flex-direction: column;
						justify-content: center;
						// align-items: center;
						margin-top: 20rpx;
						padding-right: 20rpx;

						.t-m-l-l {

							flex: 1;


							.ll-item {
								display: flex;
								flex-direction: column;
								justify-content: center;
								align-items: center;

								.line {
									width: 1rpx;
									height: 100rpx;
									max-height: 100rpx;
									background-color: #000;
								}

								.y {
									width: 10rpx;
									height: 10rpx;
									border-radius: 50%;
									border: 1rpx solid #000;
								}

								.ll-txt {
									padding-top: 3rpx;
									writing-mode: vertical-lr;
									font-size: 20px;
									font-weight: 700;
								}
							}
						}

					}

					.t-main-right {
						flex: 1;
						border-left: 2rpx solid #000;
						display: flex;
						// justify-content: space-between;
						flex-direction: column;
						padding: 30rpx 20rpx;
						align-items: center;

						.t-item {
							margin: 50rpx 0;

							display: flex;
							justify-content: center;
							align-items: center;
							// padding: 5rpx 0;
							border-top: 1rpx solid #000;
							border-bottom: 1rpx solid #000;
							// margin: 10rpx 0;
							border-radius: 10rpx;
							width: 30rpx;

							.t-txt {
								border-radius: 10rpx;
								writing-mode: vertical-lr;
								background-color: #000;
								color: #fff;
								display: flex;
								align-items: center;
								justify-content: center;
								padding: 5rpx 0;
								font-size: 20px;
							}
						}
					}
				}
			}

			.four {
				flex: 1;
				border-left: 2rpx solid #000;
				display: flex;
				justify-content: center;

				.title {

					padding-top: 30rpx;
					writing-mode: vertical-lr;
					font-weight: 700;
				}
			}
		}
	}
</style>